<template>
	<view class="app-index">
		<view class="image-bg">
			<image src="https://qb-bee-front-dev-1308147483.cos.ap-chengdu.myqcloud.com/appH5/bg.jpg" mode="widthFix" style="width: 750rpx"></image>
			<view class="btn-image">
				<image src="https://qb-bee-front-dev-1308147483.cos.ap-chengdu.myqcloud.com/appH5/btn.png" mode="widthFix" style="width: 686rpx"></image>
			</view>
			<view class="user-info">
				<view class="info-container">
					<view class="info-left">
						<image src="https://qb-bee-front-dev-1308147483.cos.ap-chengdu.myqcloud.com/appH5/avatar.png" mode="widthFix" style="width: 96rpx"></image>
					</view>
					<view class="info-center">
						<view class="center-top">
							<view class="user-name">用户07546</view>
							<view class="user-equity">未开通</view>
						</view>
						<view class="center-bottom">开通立享超值联合会员特权</view>
					</view>
					<view class="info-right">
						<view class="right-btn">领取权益></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick, watchEffect, watch } from 'vue';
import { onLoad, onPageScroll, onReady } from '@dcloudio/uni-app';

onLoad((query) => {
	// 需要一个手机号
});
</script>

<style lang="scss">
.app-index {
	width: 750rpx;
	margin: 0 auto;
	height: 100%;
	.image-bg {
		position: relative;
		.btn-image {
			position: absolute;
			top: 816rpx;
			left: 50%;
			transform: translateX(-50%);
		}
		.user-info {
			position: absolute;
			top: 595rpx;
			width: 714rpx;
			height: 160rpx;
			left: 50%;
			transform: translateX(-50%);
			border-radius: 50rpx;
			box-sizing: border-box;
			padding: 34rpx 42rpx; // 66-18 = 48
			.info-container {
				display: flex;
				height: 96rpx;
				// background-color: pink;
				.info-center {
					margin-left: 40rpx;
					// background-color: red;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					.center-top {
						align-items: center;
						display: flex;
						.user-name {
							font-weight: 500;
							font-size: 34rpx;
							color: #8d4a1e;
							height: 32rpx;
							line-height: 38rpx;
						}
						.user-equity {
							width: 90rpx;
							height: 28rpx;
							line-height: 28rpx;
							text-align: center;
							margin-left: 10rpx;
							border-radius: 50rpx;
							border: 1px solid #8d4a1e;
							font-weight: 500;
							font-size: 20rpx;
							color: #8d4a1e;
						}
					}
					.center-bottom {
						font-weight: 400;
						font-size: 24rpx;
						color: #af7138;
						// margin-top: 34rpx;
					}
				}
				.info-right {
					margin-left: 80rpx;
					.right-btn {
						cursor: pointer;

						font-weight: 400;
						font-size: 24rpx;
						color: #a06631;
					}
				}
			}
		}
	}
}
</style>
